<template>
  <div>
    <van-search placeholder="请输入搜索关键词" />
    <van-tabs @change="changtab">
      <van-tab
        v-for="item in cart"
        :title="item.title"
        :name="item._id"
        :key="item.id"
      >
      </van-tab>
      <hr />
      <p @click="jiage">
        价格
        <van-icon name="sort" v-show="sort == 0" />
        <van-icon name="arrow-up" v-show="sort == 1" />
        <van-icon name="arrow-down" v-show="sort == 2" />
      </p>
    </van-tabs>
    <!-- 商品列表区域 -->
    <div class="box">
      <div
        class="good"
        @click="$router.push('/detail?id=' + item._id)"
        v-for="item in goodlist"
        :key="item.id"
      >
        <img v-lazy="item.pic" />
        <div class="title">{{ item.title }}</div>
        <div class="price">
          <p>
            ￥{{ item.price }}

            <van-icon name="shopping-cart-o" @click.stop="showsku(item)" />
          </p>
        </div>
      </div>
    </div>
    <!-- 底部商品的自定义面板 -->
    <van-action-sheet v-model="show" title="购物车商品">
      <div class="content">
        <van-card
          :num="show_good.num"
          :price="show_good.price"
          :title="show_good.title"
          :thumb="show_good.pic"
        />
        <hr />
        <van-button type="danger" block round @click="addcart"
          >加入购物车</van-button
        >
      </div>
    </van-action-sheet>
  </div>
</template>

<script>
import Vue from "vue";
import { Lazyload } from "vant";

Vue.use(Lazyload);
export default {
  // 组件名称
  name: "demo", // 组件参数 接收来自父组件的数据
  props: [], // 局部注册的组件
  components: {}, // 组件状态值
  data() {
    return {
      cart: [],
      list: [],
      sort: 0, //0默认排序 1升序 2降序
      cid: "",
      show: false,
      show_good: {},
    };
  }, // 计算属性
  computed: {
    goodlist() {
      let arr = this.list;
      if (this.sort != 0) {
        arr.sort((a, b) => {
          return this.sort == 1 ? a.price - b.price : b.price - a.price;
        });
      }
      //点击分类进行商品列表数据的筛选
      if (this.cid != "") {
        arr = arr.filter((item) => {
          return item.cid == this.cid;
        });
      }
      return arr;
    },
  }, // 侦听器
  watch: {}, // 组件方法
  methods: {
    getcart() {
      this.$axios.get("/json/cart.json").then((res) => {
        console.log(res);
        this.cart = res.result;
      });
    },
    getlist() {
      this.$axios.get("/json/list.json").then((res) => {
        console.log(res);
        this.list = res.result;
      });
    },
    //改变升降序的逻辑
    jiage() {
      if (this.sort == 1) {
        this.sort = 2;
      } else {
        this.sort = 1;
      }
    },
    //点击头部导航栏的切换效果
    changtab(name, title) {
      console.log(name, title);
      this.cid = name; //把当前选中的分类ID给到cid的变量值
    },
    //显示底部弹框信息
    showsku(item) {
      this.show = true;
      item.num = 1;
      item.checked = true;
      this.show_good = item;
    },
    //点击加入购物车
    addcart() {
      if (this.$store.state.m_token == "") {
        this.$dialog.confirm({
          title: "登录提示",
          message: "你还没有登录 请先登录",
        })
          .then(() => {
            this.$router.push("/login")
          })
          .catch(() => {
            // on cancel
          });
          return false;
      }
      this.$store.commit("addcart",this.show_good);
      this.$toast.success("加入购物车成功");
      this.show=false;
    },
  }, // 以下是生命周期钩子 注：没用到的钩子请自行删除
  created() {},
  mounted() {
    this.getcart();
    this.getlist();
  },
  updated() {},
};
</script>

<style scoped>
.box {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  padding-bottom: 50px;
}
.good {
  width: 47%;
  margin: 1%;
  border: 1px solid #ddd;
}
img {
  width: 100%;
  height: 200px;
}
.title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
p {
  color: red;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
</style>
